<template>
  <div class="box-con">
    <div class="con-main">
      <div class="h4s animate__animated animate__fadeInUp">
        <div class="tit-l">近十年自治区高新技术企业数量</div>
        <!-- <div class="tit-r">
                    <div class="searchk">
                        <a-date-picker placeholder="选择年份" picker="year" :allowClear="false" @change="onChange">
                            <template #suffixIcon>
                                <caret-down-outlined style="color: #02FBFD" />
                            </template>
                        </a-date-picker>
                    </div>
                </div> -->
      </div>
      <div class="main-box animate__animated animate__fadeInUp">
        <div class="sta-box">
          <srLineArea :xData="linexData" :sData="linesData"></srLineArea>
        </div>
        <!-- <div class="sta-box">
                    <div class="sta-li">
                        <img src="../../../../../assets/bigScreen/sta-img1.png" alt="">
                        <h5>{{ staticData.innovationNum || 0 }}</h5>
                        <div>创新孵化场所</div>
                    </div>
                    <div class="sta-li">
                        <img src="../../../../../assets/bigScreen/sta-img2.png" alt="">
                        <h5 style="color: #18D9FF;">{{ staticData.researchOrganizationNum || 0 }}</h5>
                        <div>中试熟化机构</div>
                    </div>
                    <div class="sta-li" style="margin-top: 2rem;">
                        <img src="../../../../../assets/bigScreen/sta-img3.png" alt="">
                        <h5 style="color: #52E11D;">{{ staticData.agentNum || 0 }}</h5>
                        <div>服务专家</div>
                    </div>
                    <div class="sta-li" style="margin-top: 2rem;">
                        <img src="../../../../../assets/bigScreen/sta-img4.png" alt="">
                        <h5 style="color: #FFBE25;">{{ staticData.baseCount || 0 }}</h5>
                        <div>服务机构</div>
                    </div>
                </div> -->
      </div>
    </div>
    <div class="con-main con-main-ts">
      <div class="h4s h4s-ts animate__animated animate__fadeInUp">
        <div class="tit-l">创新孵化</div>
        <div class="tit-r">
          <!-- <div class="more">查看更多</div> -->
        </div>
      </div>
      <div class="main-box animate__animated animate__fadeInUp">
        <div class="space-box">
          <div class="space-box-child" @click="toSpaceList">
            <div>
              <h5>众创空间</h5>
            </div>
            <div class="totalBox" style="height: 8rem;">
                            <div class="totlBox-right" style="width: 20%; ">
                                <div class="numberBox">
                                    <div v-for="(item, index) in datastotal1" class="number" style="color: #00EEFD;">
                                        <CountTo  :startVal='0' :endVal='item' :separator='false' :duration='2000' />
                                    </div>
                                </div>
                            </div>
                            <div class="totalBox-left" style="display: flex; align-items: center; justify-content: center;">
                                <div class="totalBox-left-text">众创空间总数</div>
                            </div>




            </div>
                       <!-- datas2total2 -->
            <div class="space-box-child-con" style="width: 100%; height: 70%;">
              <piBar
                v-if="spaceLinexData.length != 0 && spaceLinesData.length != 0"
                :xData="spaceLinexData"
                :sData="spaceLinesData"
              ></piBar>
            </div>
          </div>
          <div class="space-box-child" @click="toIncubatorList">
            <h5>孵化器</h5>
            <div class="totalBox" style="height: 8rem;">
                            <div class="totlBox-right" style="width: 20%; margin-left: 15.6rem; ">
                                <div class="numberBox">
                                    <div v-for="(item, index) in datas2total2" class="number" style="color: #00EEFD;">
                                        <CountTo  :startVal='0' :endVal='item' :separator='false' :duration='2000' />
                                    </div>
                                </div>
                            </div>
                            <div class="totalBox-left" style="display: flex; align-items: center; justify-content: center;">
                                <div class="totalBox-left-text">孵化器总数</div>
                            </div>
            </div>
            <div class="space-box-child-con"  style="width: 100%; height: 70%;">
              <piBarTwo
                v-if="spLinexData.length != 0 && spLinesData.length != 0"
                :xData="spLinexData"
                :sData="spLinesData"
              ></piBarTwo>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="con-main">
      <div class="h4s animate__animated animate__fadeInUp">
        <div class="tit-l">星创天地按地区分布</div>
        <div class="num-li-r color-lv" style="">
          <div class="num">
            <div class="numBgBox">
              <div
                v-for="(item, index) in areaList"
                class="numBg"
                style="color: #00eefd"
              >
                <CountTo
                  :startVal="0"
                  :endVal="item"
                  :separator="false"
                  :duration="2000"
                />
              </div>
            </div>
          </div>
          <div class="num-li-l">
            <div style="color: red; font-size: 12px">星创天地总数</div>
          </div>
        </div>
      </div>
      <div
        class="main-box animate__animated animate__fadeInUp"
        @click="toStrtRegionList"
      >
        <regionLineCharts
          :xData="regionxData"
          :sData="regionsData"
          v-if="regionxData.length > 0 && regionsData.length > 0"
        ></regionLineCharts>
        <!-- <piBar :xData="linexDataTwo" :sData="linesDataTwo"></piBar> -->
        <!-- <coBarTwo :xData="linexDataTwo" :sData="linesDataTwo"></coBarTwo> -->
        <!-- <div class="demand-box">
                    <div class="demand-box-t">
                        <h6>中试熟化需求数量</h6>
                        <div class="demand-box-numk" v-if="demandNum.length != 0">
                            <div v-for="item in demandNum">{{ item }}</div>
                        </div>
                        <div class="demand-box-numk" v-else>
                            <div>0</div>
                        </div>
                    </div>
                    <div class="demand-box-b">
                        <h5>中试熟化需求TOP5</h5>
                        <div class="demandbox-b-con scroll-style">
                            <div class="demandbox-b-con-li" v-for="v in demandList">
                                <div class="de-li-l">
                                    <div></div>
                                    <span>{{ v.name }}</span>
                                </div>
                                <div class="de-li-r">{{ v.createTime && v.createTime.substring(0,10) }}</div>
                            </div>
                        </div>
                    </div>
                </div> -->
      </div>
    </div>
    <div class="con-main">
      <div class="h4s animate__animated animate__fadeInUp">
        <div class="tit-l">中试熟化</div>
        <div class="tit-r">
          <!-- <div class="more">查看更多</div> -->
        </div>
      </div>
      <div class="main-box animate__animated animate__fadeInUp">
        <div class="ages-box">
          <div class="ages-box-t" @click="toTextList">
            <h6>{{ agesData.researchOrganizationNum }}</h6>
            <!-- <h6>
                                    <CountTo :startVal='0' :endVal='[textTotal ? Number(textTotal) : 0]' :separator='false'
                                        :duration='2000' /></h6> -->
            <img src="@/assets/bigScreen/ages-num.png" alt="" />
          </div>
          <div class="ages-box-b">
            <div class="more-button" @click="toTextOrgList">查看更多</div>
            <h5>中试熟化机构</h5>
            <div class="ages-box-con">
              <div
                class="ages-box-con-li"
                v-for="v in agesData.organizationList"
              >
                <h6>{{ v.name }}</h6>
                <img
                  :src="
                    v.imgUrls.indexOf('http') == -1
                      ? baseUrl + v.imgUrls
                      : v.imgUrls
                  "
                  alt=""
                />
                <div>{{ v.address }}</div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="con-main">
      <div class="h4s animate__animated animate__fadeInUp">
        <div class="tit-l">自治区备案新型研发机构</div>
        <div class="tit-r">
          <!-- <div class="more">查看更多</div> -->
        </div>
      </div>
      <div
        class="main-box animate__animated animate__fadeInUp"
        style="padding: 2rem"
      >
        <div class="num-li-r color-lv">
          <div class="num" style="color: rgb(2, 251, 253)">
            <CountTo
              :startVal="0"
              :endVal="newLineData"
              :separator="false"
              :duration="2000"
            />
          </div>
          <div class="numBgBox">
            <div
              v-for="item in newLineData.length ? newLineData.length : 2"
              class="numBg"
              :key="item"
            ></div>
          </div>
        </div>
        <div>
          <div class="num-li-l">
            <div style="font-size: 12px">总数统计(个)</div>
          </div>
        </div>
        <div style="width: 100%; height: 70%">
          <piBarTwo
            v-if="newLinexData.length != 0 && newLinesData.length != 0"
            :xData="newLinexData"
            :sData="newLinesData"
          ></piBarTwo>
        </div>

        <!-- <div class="concept-box">
                    <div class="concept-box-t" style="height: 40%;">
                        <h5>概念验证需求</h5>
                        <div class="concept-box-conk" @click="toConceptList">
                            <div class="concept-box-con" v-if="conceptNum.length != 0">
                                <div v-for="item in conceptNum">{{ item }}</div>
                            </div>
                            <div class="num-li-r concept-box-con" v-else>
                                <div>0</div>
                            </div>
                        </div>
                    </div>
                    <div class="concept-box-t" style="height: 60%;">
                        <h5>概念验证机构</h5>
                        <div class="concept-box-chart" @click="toConceptOrgList">
                            <piBarThr v-if="cptLinexData.length != 0 && cptLinesData.length != 0" :xData="cptLinexData" :sData="cptLinesData"></piBarThr>
                        </div>
                    </div>
                </div> -->
      </div>
    </div>
    <div class="con-main">
      <div class="h4s animate__animated animate__fadeInUp">
        <div class="tit-l">产业技术创新联盟按领域分布</div>
        <div class="tit-r">
          <!-- <div class="more">查看更多</div> -->
        </div>
      </div>
      <div style="width: 100%; height: 46%">
        <div class="main-box animate__animated animate__fadeInUp">
          <pieCharts :pieData="pieData"></pieCharts>
          <!-- <div class="policy-box">
                    <div class="policy-box-t">
                        <h5>{{ policyData.num }}</h5>
                        <img src="../../../../../assets/bigScreen/policy-bg.png" alt="">
                        <div>政策数量</div>
                    </div>
                    <div class="policy-box-b">
                        <div class="demandbox-b-con">
                            <div class="demandbox-b-con-li" v-for="v in policyData.topFour">
                                <div class="de-li-l">
                                    <span>{{ v.title }}</span>
                                </div>
                                <div class="de-li-r">{{ v.createTime && v.createTime.substring(0,10) }}</div>
                            </div>
                        </div>
                    </div>
                </div> -->
        </div>
      </div>
      <div>
        <div class="h4s animate__animated animate__fadeInUp">
          <div class="tit-l">农业科技园区按级别统计</div>
        </div>
      </div>
    </div>
    <div class="con-main">
      <div class="h4s animate__animated animate__fadeInUp">
        <div class="tit-l">农业科技园区按级别统计</div>
        <div class="tit-r">
          <!-- <div class="more">查看更多</div> -->
        </div>
      </div>
      <div
        class="main-box animate__animated animate__fadeInUp"
        @click="toLevelTotal"
      >
        <div class="trends-box">
          <!-- <commonLineBar :xData="linexDataThree" :sData="linesDataThree"></commonLineBar> -->
          <div class="ct-numk-con">
            <div class="ctnumk-li">
              <div class="ctnum">
                <div v-for="(item, index) in linesDataThree[0]" :key="index">
                  {{ item }}
                </div>
              </div>
              <div class="cttit">国家级数量</div>
            </div>
            <div class="ctnumk-li">
              <div class="ctnum" style="color: #02fbfd">
                <div v-for="(item, index) in linesDataThree[1]" :key="index">
                  {{ item }}
                </div>
              </div>
              <div class="cttit">自治区级数量</div>
            </div>
          </div>
          <pieOtherCharts
            v-if="pieDataOther.length > 0"
            :pieData="pieDataOther"
          ></pieOtherCharts>
        </div>

        <!-- <div class="trends-box">
                    <h5>最新资讯浏览量TOP5</h5>
                    <div class="trends-box-con">
                        <div class="trends-box-con-li" v-for="(v,k) in trendsList" :key="k">
                            <div class="before-count">
                                <span>{{k+1}}</span>
                            </div>
                            <div class="trends-box-con-li-l">{{ v.title }}</div>
                            <div class="trends-box-con-li-r">{{ v.createTime && v.createTime.substring(0,10) }}</div>
                        </div>
                    </div>
                </div> -->
      </div>
    </div>
  </div>
</template>

<script setup>
import { useRoute, useRouter } from "vue-router";
import srLineArea from "../childComponent/srLineArea.vue";
import commonLineBar from "../childComponent/commonLineBar.vue";
import regionLineCharts from "./components/regionLineCharts.vue";
import pieCharts from "../childComponent/pieCharts.vue";
import pieOtherCharts from "../childComponent/pieOtherCharts.vue";
import piBar from "../childComponent/piBar.vue";
import piBarTwo from "../childComponent/piBarTwo.vue";
import piBarThr from "../childComponent/piBarThr.vue";
import { ref, onMounted } from "vue";
import { CountTo } from "vue3-count-to";
// import { CaretDownOutlined } from "@ant-design/icons-vue";
// import { baseUrl } from "../../../../../../config";
const baseUrl = 'https://test-mkj-hd-new.huaxun.ink'
// import {
//   getStaticData,
//   getSpaceData,
//   getRequireData,
//   getPilotRipeningData,
//   getProofOfConceptData,
//   getDynamicsData,
//   getPolicyData,
//   getTextTotalData,
//   getRegionStarData,
//   getLevelTotalData,
// } from "../../../../../api/screenProjectIncubation.js";

const router = useRouter();

const searchYear = ref(undefined);
const staticData = ref({});
const spaceLinexData = ref([]);
const spaceLinesData = ref([]);
const spLinexData = ref([]);

const spLinesData = ref([]);

const demandNum = ref([]);
const demandList = ref([]);
const agesData = ref({});
const conceptNum = ref([]);
const cptLinexData = ref([]);
const cptLinesData = ref([]);
const trendsList = ref([]);
const policyData = ref({});

const linexData = ref([2020, 2021, 2022, "2023(预)"]);
const linesData = ref([1069, 1223, 1573, 1900]);

const regionxData = ref([]);
const regionsData = ref([]);

const linexDataTwo = ref([
  "直属",
  "阿拉善",
  "呼和浩特市",
  "包头市",
  "乌海市",
  "赤峰市",
  "呼伦贝尔市",
  "兴安盟",
  "通辽市",
  "锡林郭勒盟",
  "乌兰察布市",
  "鄂尔多斯市",
  "巴彦淖尔市",
  "阿拉善盟",
  "满洲里市",
]);
const linesDataTwo = ref([
  3, 2, 41, 12, 13, 17, 11, 12, 22, 6, 10, 22, 18, 3, 1,
]);

const linexDataThree = ref(["国家级", "自治区级"]);
const linesDataThree = ref([]);
const pieDataOther = ref([]);

const pieData = ref([
  {
    name: "新材料",
    value: 1,
  },
  {
    name: "生态环境",
    value: 1,
  },
  {
    name: "工业",
    value: 6,
  },
  {
    name: "中药材",
    value: 4,
  },
  {
    name: "畜牧",
    value: 5,
  },
  {
    name: "农业机械",
    value: 1,
  },
  {
    name: "人口健康",
    value: 1,
  },
  {
    name: "管理",
    value: 3,
  },
  {
    name: "农业",
    value: 16,
  },
]);

const newLinexData = ref([
  "呼和浩特市",
  "包头市",
  "赤峰市",
  "呼伦贝尔市",
  "兴安盟",
  "锡林郭勒盟",
  "鄂尔多斯市",
  "巴彦淖尔市",
  "阿拉善盟",
  "直属",
]);
const newLinesData = ref([16, 7, 3, 1, 8, 1, 4, 2, 4, 2]);
//
const newLineData = newLinesData.value.reduce((prev, curr) => {
  return prev + curr;
}, 0);

const datastotal1 = ref([]);
const datas2total2 = ref([]);
console.log("总数1", datastotal1.value);

const areaList = ref([]);
const textTotal = ref(0);

const toTextList = () => {
  router.push({
    path: "/bigScreen/textList",
    query: {
      name: "中试熟化需求",
    },
  });
};

const toTextOrgList = () => {
  router.push({
    path: "/bigScreen/textOrgList",
    query: {
      name: "中试熟化机构",
    },
  });
};

const toConceptList = () => {
  router.push({
    path: "/bigScreen/conceptList",
    query: {
      name: "概念验证需求",
    },
  });
};

const toConceptOrgList = () => {
  router.push({
    path: "/bigScreen/conceptOrgList",
  });
};

const toSpaceList = () => {
  router.push({
    path: "/bigScreen/spaceList",
  });
};

const toIncubatorList = () => {
  router.push({
    path: "/bigScreen/incubatorList",
  });
};

const toStrtRegionList = () => {
  router.push({
    path: "/bigScreen/strtRegionList",
  });
};

const toLevelTotal = () => {
  router.push({
    path: "/bigScreen/levelList",
  });
};

const onChange = (date, dateStr) => {
  searchYear.value = dateStr;
  getStaticDataFunc();
};
const getStaticDataFunc = () => {
  // getStaticData({ year: searchYear.value }).then((res) => {
  //   if (res.code == 200) {
  //     staticData.value = res.data;
  //   }
  // });
};
const getData = () => {
  getStaticDataFunc();
  // getSpaceData().then((res) => {
  //   console.log("所有数据", res);
  //   if (res.code == 200) {
  //     let datas = res.data["众创空间"] ? res.data["众创空间"] : [];
  //     console.log("众创空间", datas);
  //     let datastotal = res.data["众创空间总数"].toString().split("");
  //     datastotal.map((v) => {
  //       datastotal1.value.push(v);
  //     });
  //     console.log("总数", datastotal);
  //     //   const spaceLinexDataTotal = ref();
  //     //   spaceLinexDataTotal.value = datastotal;
  //     datas.map((v) => {
  //       spaceLinexData.value.push(v.areaName);
  //       spaceLinesData.value.push(v.count);
  //     });
  //     let datas2 = res.data["孵化器"] ? res.data["孵化器"] : [];
  //     let datas2total = res.data["孵化器总数"].toString().split("");
  //     datas2total.map((v) => {
  //       datas2total2.value.push(v);
  //     });
  //     console.log("孵化器", datas2total2);
  //     datas2.map((v) => {
  //       spLinexData.value.push(v.areaName);
  //       spLinesData.value.push(v.count);
  //     });
  //   }
  // });
  // getRequireData().then((res) => {
  //   if (res.code == 200) {
  //     demandNum.value = res.data.num ? res.data.num.toString().split("") : [];
  //     demandList.value = res.data.topFive;
  //   }
  // });
  // getPilotRipeningData().then((res) => {
  //   if (res.code == 200) {
  //     agesData.value = res.data;
  //   }
  // });
  // getProofOfConceptData().then((res) => {
  //   if (res.code == 200) {
  //     conceptNum.value = res.data.num ? res.data.num.toString().split("") : [];
  //     let datas = res.data.orgInfo ? res.data.orgInfo : [];
  //     datas.map((v) => {
  //       cptLinexData.value.push(v.orgClass);
  //       cptLinesData.value.push(v.count);
  //     });
  //   }
  // });
  // getDynamicsData().then((res) => {
  //   if (res.code == 200) {
  //     trendsList.value = res.data;
  //   }
  // });
  // getPolicyData().then((res) => {
  //   if (res.code == 200) {
  //     policyData.value = res.data;
  //   }
  // });
  // getTextTotalData().then((res) => {
  //   if (res.code == 200) {
  //     textTotal.value = res.data || 0;
  //   }
  // });
  // getRegionStarData().then((res) => {
  //   console.log("星创天地按地区分布", res);
  //   console.log("星创天地按地区分布", res.data.total);
  //   let area = res.data.total.toString().split("");
  //   console.log("星创总数", area);
  //   area.map((v) => {
  //     areaList.value.push(v);
  //   });
  //   if (res.code == 200) {
  //     let data = res.data;
  //     data.map((item) => {
  //       regionxData.value.push(item.orgName);
  //       regionsData.value.push(item.count);
  //     });
  //   }
  // });
  // getLevelTotalData().then((res) => {
  //   if (res.code == 200) {
  //     let data = res.data;
  //     data.map((item) => {
  //       linexDataThree.value.push(item.type);
  //       linesDataThree.value.push(String(item.count));
  //       pieDataOther.value.push({
  //         name: item.type,
  //         value: String(item.count),
  //       });
  //     });
  //   }
  // });
};
onMounted(() => {
  getData();
});
</script>

<style scoped lang="scss">
h1,
h2,
h3,
h4,
h5,
h6 {
  margin: 0;
}
.box-con {
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: space-between;
  // align-items: center;
  flex-wrap: wrap;
  overflow: hidden;

  .con-main {
    width: calc((100% - 4.5rem) / 4);
    height: calc((100% - 2rem) / 2);

    .main-box {
      height: calc(100% - 4.5rem);
      // background-image: url('../../../../../assets/bigScreen/square-bg.png');
      background-repeat: no-repeat;
      background-size: 100% 100%;
      border: 1px solid #07294c;
      .sta-box {
        height: 100%;
        padding: 2rem;
        display: flex;
        // align-items: center;
        justify-content: space-between;
        flex-wrap: wrap;
        box-sizing: border-box;
        .sta-li {
          width: calc((100% - 2rem) / 2);
          height: calc((100% - 2rem) / 2);
          border-radius: 0.6rem;
          background: #00183b;
          border: 0.1rem solid rgba(45, 205, 255, 0.17);
          display: flex;
          flex-direction: column;
          justify-content: space-around;
          text-align: center;
          img {
            width: 5.6rem;
            height: 7.1rem;
            margin: auto;
          }
          h5 {
            font-size: 2.8rem;
            line-height: 2.6rem;
            color: #ff8f1f;
          }
          div {
            font-size: 1.6rem;
            line-height: 2.6rem;
            color: #2dccff;
          }
        }
      }
      .space-box {
        height: 100%;
        display: flex;
        flex-wrap: wrap;
        .space-box-child {
          width: 50%;
          height: 100%;
          padding: 2rem;
          border-right: 0.1rem solid rgba(47, 88, 158, 0.31);
          &:last-child {
            border-right: none;
          }
          h5 {
            font-size: 1.6rem;
            font-weight: 500;
            line-height: 2.5rem;
            letter-spacing: 0;
            color: #ffffff;
            padding-left: 0.8rem;
            border-left: 0.3rem solid #02e1e2;
            margin-bottom: 0.8rem;
          }
          .space-box-child-con {
            height: calc(100% - 3.3rem);
          }
        }
      }
      .demand-box {
        height: 100%;
        .demand-box-t {
          padding-top: 1rem;
          height: 10rem;
          h6 {
            font-size: 1.6rem;
            font-weight: normal;
            line-height: 2.2rem;
            letter-spacing: 0;
            color: #ffffff;
            text-align: center;
          }
          .demand-box-numk {
            display: flex;
            justify-content: center;
            align-items: center;
            margin-top: 1rem;
            color: #00fbff;
            font-family: "ffa";
            div {
              width: 3.9rem;
              height: 5rem;
              background: linear-gradient(
                0deg,
                #021536 10%,
                rgba(2, 21, 54, 0.26) 100%
              );
              box-sizing: border-box;
              border: 1px solid;
              border-image: linear-gradient(
                  180deg,
                  #4192d9 2%,
                  rgba(65, 146, 217, 0.3) 34%,
                  rgba(65, 146, 217, 0.3) 68%,
                  #4192d9 100%
                )
                1;
              box-shadow: inset 0px -1px 3px 0.5px rgba(132, 160, 201, 0.44),
                inset 0px 5px 20px 0.5px rgba(43, 46, 52, 0.56);
              margin: 0 0.3rem;
              text-align: center;
              line-height: 5rem;
              font-size: 3rem;
              font-weight: normal;
              letter-spacing: 0;
              text-shadow: 0 0.4rem 1rem 0 rgba(255, 221, 3, 0.44);
            }
          }
        }
        .demand-box-b {
          padding: 1rem 1.5rem;
          height: calc(100% - 10rem);
          h5 {
            font-size: 1.6rem;
            font-weight: 500;
            line-height: 2.5rem;
            letter-spacing: 0;
            color: #ffffff;
            padding-left: 0.8rem;
            border-left: 0.3rem solid #02e1e2;
            margin-bottom: 0.8rem;
          }
          .scroll-style {
            height: calc(100% - 3.3rem);
            overflow-y: scroll;
            scrollbar-width: none; /* firefox */
            -ms-overflow-style: none; /* IE 10+ */
          }
          .scroll-style::-webkit-scrollbar {
            display: none; /* Chrome Safari */
          }
        }
      }
      .ages-box {
        height: 100%;
        padding: 0 1.5rem 1rem;
        display: flex;
        flex-direction: column;
        justify-content: space-around;
        .ages-box-t {
          text-align: center;
          max-height: 12rem;
          animation: breathing 3s ease-in-out infinite;
          h6 {
            font-size: 4rem;
            font-weight: bold;
            color: #00e0fc;
          }
          img {
            width: 31rem;
            height: 5rem;
          }
        }

        @keyframes breathing {
          0% {
            transform: scale(1);
          }
          50% {
            transform: scale(0.9);
          }
          100% {
            transform: scale(1);
          }
        }

        .ages-box-b {
          position: relative;
          .more-button {
            position: absolute;
            right: 0;
            top: 0.5rem;
            font-size: 1.2rem;
            color: rgba(255, 255, 255, 0.4);
            cursor: pointer;
          }

          h5 {
            font-size: 1.6rem;
            font-weight: 500;
            line-height: 2.5rem;
            letter-spacing: 0;
            color: #ffffff;
            padding-left: 0.8rem;
            border-left: 0.3rem solid #02e1e2;
            margin-bottom: 0.8rem;
          }
          .ages-box-con {
            display: flex;
            justify-content: space-between;
            align-items: center;
            height: calc(100% - 3.3rem);
            .ages-box-con-li {
              background: #062054;
              border-radius: 0.4rem;
              width: calc((100% - 1rem) / 2);
              height: 100%;
              padding: 1rem;
              h6 {
                font-size: 1.4rem;
                color: #11b4ff;
                overflow: hidden;
                text-overflow: ellipsis;
                display: -webkit-box;
                -webkit-line-clamp: 2; //行数
                line-clamp: 2;
                -webkit-box-orient: vertical;
                height: 4.2rem;
              }
              img {
                margin: 1rem 0;
                width: 100%;
                height: 8rem;
              }
              div {
                font-size: 1.2rem;
                color: rgba(255, 255, 255, 0.54);
                white-space: nowrap;
                overflow: hidden;
                text-overflow: ellipsis;
              }
            }
          }
        }
      }
      .concept-box {
        height: 100%;
        .concept-box-t {
          height: 50%;
          padding: 1.5rem;
          border-bottom: 0.1rem solid rgba(59, 166, 255, 0.28);
          h5 {
            font-size: 1.6rem;
            font-weight: 500;
            line-height: 2.5rem;
            letter-spacing: 0;
            color: #ffffff;
            padding-left: 0.8rem;
            border-left: 0.3rem solid #02e1e2;
            margin-bottom: 0.8rem;
          }
          .concept-box-conk {
            h6 {
              font-size: 1.6rem;
              font-weight: normal;
              line-height: 2.2rem;
              letter-spacing: 0;
              color: #ffffff;
              text-align: center;
            }
            .concept-box-con {
              display: flex;
              justify-content: center;
              align-items: center;
              margin-top: 1rem;
              color: #00fbff;
              font-family: "ffa";
              div {
                width: 3.9rem;
                height: 5rem;
                background: linear-gradient(
                  0deg,
                  #021536 10%,
                  rgba(2, 21, 54, 0.26) 100%
                );
                box-sizing: border-box;
                border: 1px solid;
                border-image: linear-gradient(
                    180deg,
                    #4192d9 2%,
                    rgba(65, 146, 217, 0.3) 34%,
                    rgba(65, 146, 217, 0.3) 68%,
                    #4192d9 100%
                  )
                  1;
                box-shadow: inset 0px -1px 3px 0.5px rgba(132, 160, 201, 0.44),
                  inset 0px 5px 20px 0.5px rgba(43, 46, 52, 0.56);
                margin: 0 0.3rem;
                text-align: center;
                line-height: 5rem;
                font-size: 3rem;
                font-weight: normal;
                letter-spacing: 0;
                text-shadow: 0 0.4rem 1rem 0 rgba(255, 221, 3, 0.44);
              }
            }
          }
          .concept-box-chart {
            height: calc(100% - 3.3rem);
          }
        }
        .concept-box-t:last-child {
          border-bottom: none;
        }
      }
      .trends-box {
        height: 100%;
        padding: 2rem 1.5rem;

        .ct-numk-con {
          display: flex;
          justify-content: space-between;
          align-items: center;
          .ctnumk-li {
            background-image: url("@/assets/bigScreen/ctnum-bgimg.png");
            background-size: 100% 100%;
            background-repeat: no-repeat;
            width: 18rem;
            height: 10rem;
            display: flex;
            flex-direction: column;
            justify-content: space-around;
            .ctnum {
              display: flex;
              justify-content: center;
              color: #ffdd03;
              font-weight: bold;
              div {
                font-size: 3rem;
                // font-weight: normal;
                background-image: url("@/assets/bigScreen/ctnum-bg1.png");
                background-size: 100% 100%;
                background-repeat: no-repeat;
                line-height: 3.2rem;
                letter-spacing: 0;
                width: 2.4rem;
                height: 3.7rem;
                line-height: 3.7rem;
                text-align: center;
                margin: 0 0.05rem;
              }
            }
            .cttit {
              font-size: 1.2rem;
              font-weight: normal;
              line-height: 1.7rem;
              text-align: center;
              letter-spacing: 0;
              background: linear-gradient(to bottom, #00c8ff 0%, #0066ff 100%);
              -webkit-background-clip: text;
              color: transparent;
            }
          }
          .ctnumk-li:nth-child(2) {
            margin: 0 1.3rem;
          }
        }

        h5 {
          font-size: 1.6rem;
          font-weight: 500;
          line-height: 2.5rem;
          letter-spacing: 0;
          color: #ffffff;
          padding-left: 0.8rem;
          border-left: 0.3rem solid #02e1e2;
          margin-bottom: 0.8rem;
        }
        .trends-box-con {
          margin-top: 1rem;
          height: calc(100% - 4.3rem);
          overflow-y: scroll;
          scrollbar-width: none; /* firefox */
          -ms-overflow-style: none; /* IE 10+ */

          .trends-box-con-li {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-bottom: 1rem;
            .before-count {
              display: block;
              width: 2.5rem;
              height: 2.5rem;
              text-align: center;
              padding-top: 0.1rem;
              font-size: 1.2rem;
              color: #4972b8;
              background-size: 100% 100%;
              background-image: url("@/assets/bigScreen/sorts-pt.png");
              span {
                display: block;
                transform: translateX(-1px);
              }
            }
            &:first-child {
              .before-count {
                background-image: url("@/assets/bigScreen/sorts1.png");
                color: #c6502d;
              }
            }
            &:nth-child(2) {
              .before-count {
                background-image: url("@/assets/bigScreen/sorts2.png");
                color: #ffa514;
              }
            }
            &:nth-child(3) {
              .before-count {
                background-image: url("@/assets/bigScreen/sorts3.png");
                color: #2dccff;
              }
            }
            &:last-child {
              margin-bottom: 0;
            }
            .trends-box-con-li-l {
              flex: 1;
              font-size: 1.3rem;
              color: #15e8ff;
              max-width: 80%;
              white-space: nowrap;
              overflow: hidden;
              text-overflow: ellipsis;
              margin-right: 1rem;
            }
            .trends-box-con-li-r {
              font-size: 1.3rem;
              color: rgba(21, 232, 255, 0.46);
            }
          }
        }
        .trends-box-con::-webkit-scrollbar {
          display: none; /* Chrome Safari */
        }
      }
      .policy-box {
        height: 100%;
        padding: 1.5rem;
        .policy-box-t {
          border-radius: 0.6rem;
          background: #00183b;
          border: 0.1rem solid rgba(45, 205, 255, 0.17);
          display: flex;
          flex-direction: column;
          justify-content: space-around;
          text-align: center;
          padding: 1rem 0;
          height: 14rem;
          h5 {
            font-size: 2.8rem;
            line-height: 2.6rem;
            color: rgba(255, 221, 0, 0.98);
          }
          img {
            width: 19rem;
            height: 11.8rem;
            margin: -4.2rem auto 0;
          }
          div {
            font-size: 1.4rem;
            font-weight: normal;
            line-height: 2.6rem;
            color: #2dccff;
          }
        }
        .policy-box-b {
          margin-top: 1rem;
          height: calc(100% - 15rem);
          overflow-y: scroll;
          scrollbar-width: none; /* firefox */
          -ms-overflow-style: none; /* IE 10+ */
        }
        .policy-box-b::-webkit-scrollbar {
          display: none; /* Chrome Safari */
        }
      }
    }
  }
  .con-main:nth-child(n + 4) {
    margin-top: 2rem;
  }
  .con-main-ts {
    width: calc((100% - 4.5rem) / 4 * 2 + 1.5rem);
  }
}
.h4s {
  height: 4.5rem;
  line-height: 4.5rem;
  background-image: url("@/assets/bigScreen/title-bg4.png");
  background-repeat: no-repeat;
  background-size: 100% 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 1.6rem 0.3rem 4.7rem;
  box-sizing: border-box;

  .tit-l {
    font-size: 1.8rem;
    font-weight: bold;
    line-height: 2.6rem;
    letter-spacing: 0;
    color: #ffffff;
    text-shadow: 0 0.24rem 0.47rem 0 rgba(0, 80, 203, 0.61);

    span {
      font-size: 1.4rem;
      letter-spacing: 0;
      color: rgba(255, 255, 255, 0.62);
      margin-left: 1.8rem;
    }
  }

  .tit-r {
    display: flex;
    align-items: center;
  }
  .more {
    font-size: 1.2rem;
    font-weight: normal;
    line-height: 2.6rem;
    letter-spacing: 0rem;
    color: rgba(255, 255, 255, 0.8);
    text-shadow: 0 0.24rem 0.47rem 0 rgba(0, 80, 203, 0.61);
    cursor: pointer;
  }
}
.h4s-ts {
  background-image: url("@/assets/bigScreen/title-bg2.png");
}
.demandbox-b-con {
  .demandbox-b-con-li {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 1.5rem 1rem;
    font-size: 1.3rem;
    color: rgba(255, 255, 255, 0.5);
    .de-li-l {
      display: flex;
      align-items: center;
      color: #fff;
      max-width: 75%;
      div {
        width: 0.6rem;
        height: 0.6rem;
        background: #037aff;
        border-radius: 50%;
        margin-right: 0.8rem;
      }
      span {
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
      }
    }
  }
  .demandbox-b-con-li:nth-child(odd) {
    background-color: #0a1f44;
  }
}
::v-deep .searchk .ant-picker {
  background-color: inherit;
  border: 0.1rem solid rgba(2, 251, 253, 0.3);
}
::v-deep .searchk .ant-picker-input > input {
  color: #02fbfd;
}
.num-li-l {
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 2rem;
  font-weight: normal;
  line-height: 2rem;
  text-align: center;
  display: flex;
  align-items: center;
  letter-spacing: 0;
  color: #ffffff;
  padding: 1rem 0;

  img {
    width: 8rem;
    height: 8rem;
    margin-right: 1.5rem;
  }
}

.num-li-r {
  width: 40%;
  // height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  // border-left: 0.1rem solid #02325a;
  margin: auto;
  .num {
    // background-image: url("../../../../../assets/bigScreen/num-bg.png");
    background-size: 100% 100%;
    background-repeat: no-repeat;
    // color: #ffdd03;
    font-size: 3.2rem;
    // width: 8rem;
    height: 5.5rem;
    line-height: 5.5rem;
    border-radius: 0.5rem;
    // background: #052557;
    // border: 0.1rem solid rgba(45, 204, 255, 0.25);
    // box-shadow: 0 0.3rem 0.8rem 0 rgba(0, 0, 0, 0.3);
    text-align: center;
    font-family: "ffa";
    margin: 0 0.2rem;
    z-index: 10;
    letter-spacing: 2rem;
    padding-left: 2rem;
  }
  .numBgBox {
    position: absolute;
    display: flex;
    justify-content: center;
    align-items: center;
    margin: auto;
  }
  .numBg {
    background-image: url("@/assets/bigScreen/num-bg.png");
    background: #052557;
    border: 0.1rem solid rgba(45, 204, 255, 0.25);
    box-shadow: 0 0.3rem 0.8rem 0 rgba(0, 0, 0, 0.3);
    width: 3rem;
    height: 5.5rem;
    line-height: 5.5rem;
    margin: 0 0.2rem;
    z-index: 0;
  }

  // div {
  //     background-image: url("../../../../../assets/bigScreen/num-bg.png");
  //     background-size: 100% 100%;
  //     background-repeat: no-repeat;
  //     color: #ffdd03;
  //     font-size: 3.2rem;
  //     width: 8rem;
  //     height: 5.5rem;
  //     line-height: 5.5rem;
  //     border-radius: 0.5rem;
  //     background: #052557;
  //     border: 0.1rem solid rgba(45, 204, 255, 0.25);
  //     box-shadow: 0 0.3rem 0.8rem 0 rgba(0, 0, 0, 0.3);
  //     text-align: center;
  //     font-family: "ffa";
  //     margin: 0 0.2rem;
  // }
}
.totalBox {
//   display: flex;
//   justify-content: left;
//   align-items: center;
  width: 95%;
  height: 5rem;
//   border: 1px solid #02325a;
//   background: rgba(2, 21, 54, 0.6);
//   border-radius: 5px;

  .totalBox-left {
    display: flex;
    justify-content: left;
    align-items: center;
    // width: 40%;
    // height: 100%;
    // border-right: 1px solid #02325a;
    // padding-left: 2rem;

    .totalBox-left-icon {
      width: 2rem;
      height: 2rem;

      img {
        width: 100%;
        height: 100%;
      }
    }

    .totalBox-left-text {
      font-size: 1.8rem;
      color: #00eefd;
      margin-left: 1rem;
      margin-top: 0.5rem;
    }
  }

  .totlBox-right {
    display: flex;
    justify-content: right;
    width: 27%;
    margin-left:17.6rem ;


    .numberBox {
      display: flex;
      justify-content: center;
      align-items: center;
      height: 4rem;
      .number {
        display: flex;
        justify-content: center;
        align-items: center;
        width: 3rem;
        height: 100%;
        font-size: 3.2rem;
        border-radius: 0.5rem;
        text-align: center;
        font-family: "ffa";
        background: #052557;
        margin-left: 0.5rem;
      }
    }
  }
}
.topTotal {
                display: flex;
                justify-content: center;
                align-items: center;
                padding: 0 3rem;

                .topTotal-item {
                    display: flex;
                    justify-content: center;
                    align-items: center;
                    flex-direction: column;

                    .topTotal-item-title {
                        font-size: 1.3rem;
                        color: #2DCCFF;
                        margin-top: 0.5rem;
                    }

                    .numberBox {
                        display: flex;
                        justify-content: center;
                        align-items: center;
                        height: 4rem;
                        margin-left: 30%;
                        .number {
                            display: flex;
                            justify-content: center;
                            align-items: center;
                            width: 3rem;
                            height: 100%;
                            font-size: 3.2rem;
                            border-radius: 0.5rem;
                            text-align: center;
                            font-family: "ffa";
                            background: #052557;
                            margin-left: 0.5rem;
                        }
                    }
                }
            }
</style>

